import React from "react";
import { View, Text} from '@tarojs/components'



import { default as ListView, RefreshState } from './index'

type StateProp = {
    pageNo: number;
    dataList: any[]
}
type StateReducerProp = (state: StateProp, action: Partial<StateProp>) => StateProp

const reduer = (state, action) => Object.assign({}, state, action)


export default () => {
    const [viewModel, setViewModel] = React.useReducer<StateReducerProp>(
        reduer,
        {
            pageNo: 1,
            dataList: []
        })


    React.useEffect(() => {
        loadData()
    }, [viewModel.pageNo])

    const initLoadData = () => {

        if (viewModel.pageNo == 1) {
            loadData()
        } else {
            setViewModel({ pageNo: 1 })
        }
    }



    const getData = ({ pageNo }) => {

        if (pageNo < 3) return Array.from(({ length: 10 }), (v, i) => i)
        let length = Math.ceil(Math.random() * 10)
        return Array.from(({ length: length }), (v, i) => i)
    }


    const loadData = async () => {
        if (viewModel.pageNo == 1) {
            ListViewRef.current?.showHeaderRefresh()
        }
        await Wait(1000)
        let pageNo = viewModel.pageNo
        let arr: any[] = getData({ pageNo })
        let dataList: any[] = pageNo == 1 ? arr : [...viewModel.dataList, ...arr]
        console.log('viewModel.dataList', pageNo, viewModel.dataList)
        if (arr.length == 10) {
            ListViewRef.current?.showFooterRefresh()
            return setViewModel({ dataList, pageNo: viewModel.pageNo + 1 })
        } else if (arr.length < 10) {
            ListViewRef.current?.showFooterMode(RefreshState.NoMoreData)
        }
        setViewModel({ dataList })
    }

    const ListViewRef = React.useRef<any>()

    return (
        <View style={styles.container}>
            <ListView
                ref={ListViewRef}
                onHeaderRefresh={() => {
                    console.log('onHeaderRefresh',)
                    initLoadData()
                }}
                onFooterRefresh={() => {

                    console.log('onFooterRefresh',)
                    setViewModel({ pageNo: viewModel.pageNo + 1 })
                }}
            >
                {viewModel.dataList.map((item, index) => {

                    return <View key={`sg-${index}`} style={{ flexGrow: 0, flexShrink: 0, width: '100vw', height: '44px', backgroundColor: RandomColor() }}>
                        {index}
                    </View>
                })}
            </ListView>


            <Text onClick={() => {

            }}>刷新</Text>
        </View>
    )
}











const styles: Record<string, React.CSSProperties> = {
    container: {
        display: 'flex',
        flexDirection: 'column',
        width: '100vw',
        height: '100vh',
        overflow: 'hidden',
    },
}



export const Wait = (timeout = 350) => {
    return new Promise(resolve => {
        setTimeout(resolve, timeout);
    });
}


export const RandomColor = () => {
    return `rgba(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.random()})`
}